/*
 * @Author: quit
 * @Date: 2023-02-23 12:06:05
 * @LastEditTime: 2023-02-27 08:38:12
 * @Descripttion:
 * @notice:
 */
// import React from 'react';
// import ReactDOM from 'react-dom/client';
// import './index.css'
// import App from './App';
// import reportWebVitals from './reportWebVitals';

// const root = ReactDOM.createRoot(document.getElementById('root'));
// root.render(
//   <React.StrictMode>
//     <App />
//   </React.StrictMode>
// );

// // If you want to start measuring performance in your app, pass a function
// // to log results (for example: reportWebVitals(console.log))
// // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
// reportWebVitals();

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import FirstComponent from './hello'
import EventComponent from './eventComponent'
import UseState from './useState'
import ControlledComponent from './controlledComponent'
import Communication from './communication'

// const div = React.createElement('div', null, 'Hello React-cli !!')

const str = 'JSX'
const sayHi = () => {
    return 'Hi~'
}
const dv = <div>jsx</div>

/**
 * 条件渲染
 */
const isLoading = false
const loadData = () => {
    if (isLoading) {
        return <div> loading... </div>
    }
    return <div> 数据加载完成 </div>
}
const loadData_2 = () => {
    return isLoading ? <div> loading... </div> : <div> 数据加载完成 </div>
}
// 逻辑与运算符
const loadData_3 = () => {
    return isLoading && <div> loading... </div>
}

/**
 * 列表渲染
 * 需要给元素添加一个key属性,尽量避免使用索引号进行绑定
 */
const lis = [
    { name: 'A', id: 1 },
    { name: 'B', id: 2 },
    { name: 'C', id: 3 }
]

/**
 * 样式添加
 */
// 1.行内样式
const styleNode = <div style={{ color: 'red', backgroundColor: 'skyblue' }}>JSX样式处理</div>
// 2.calss
const styleNode_2 = (
    <div className="styleNode">
        JSX样式处理
        <div id="app" />
        <div id="event" />
        <div id="state" />
        <div id="controlledComponent" />
        <div id="communication" />
    </div>
)

// 使用JSX创建元素
const div = (
    <div>
        Hello React-cli !!!
        <div className="jsx">{str}</div>
        <div>{'a'}</div>
        <div>{1 + 1}</div>
        <div>{3 > 5 ? 'yes' : 'no'}</div>
        <div>{sayHi()}</div>
        {dv}
        {loadData()}
        {loadData_2()}
        {loadData_3()}
        {lis.map(item => (
            <li key={item.id}>{item.name}</li>
        ))}
        {styleNode}
        {styleNode_2}
    </div>
)

/**
 * 组件
 */

// 函数组件
// function Hello() {
//     return <div> React函数组件 </div>
// }
// ReactDOM.render(<Hello />, document.getElementById('root'))

// 类组件
// class Hello extends React.Component {
//     render() {
//         return <div>React 类组件</div>
//     }
// }
// ReactDOM.render(<Hello />, document.getElementById('root'))

ReactDOM.render(div, document.getElementById('root'))
// 导入独立组件
// import FirstComponent from './hello.js' // import reorder to top
ReactDOM.render(<FirstComponent />, document.getElementById('app'))
// import EventComponent from './eventComponent'
ReactDOM.render(<EventComponent />, document.getElementById('event'))
// import UseState from './useState'
ReactDOM.render(<UseState />, document.getElementById('state'))
ReactDOM.render(<ControlledComponent />, document.getElementById('controlledComponent'))
ReactDOM.render(
    <Communication
        name="mack"
        age={19}
        colors={['red', 'green', 'blue']}
        fn={() => {
            console.log('Ok')
        }}
        tag={<div> JSX! </div>}
    />,
    document.getElementById('communication')
)
